<template>
  <div class="c-item">
      <div class="mf">
          <div class="uname">{{common.uname}}</div>
          <div class="date">{{common.addTime | dateLocal}}</div>
      </div>
      <div>
          <rating :value="common.rate" readonly :size="1"></rating>
      </div>
      <div>{{common.title}}</div>
      <div>{{common.content}}</div>
      <div class="mf">
          <img :key="idx" v-for="(item,idx) in common.imgs" :src="item.resource" alt="" srcset="">
      </div>
      <div>
          <div><i class="iconfont " @click="changeLike(common.LIKE,common.id)" :class="[common.isLike ? 'icon-md-thumbs-up': 'icon-thumbs-up']"></i>{{common.likeNum}}</div>
          <div><i class="iconfont " @click="changeLike(common.DISLIKE,common.id)" :class="[common.isDislike ? 'icon-md-thumbs-down': 'icon-thumbs-down']"></i>{{common.disLikeNum}}</div>
      </div>
  </div>
</template>

<script>
import Rating from "../rating/rating"
import {localDate} from "base/common"
import {Common} from "network/common"

export default {
  data () {
    return {
    };
  },
  props: {
      common: Common
  },

  components: {
      Rating
  },

  filters: {
      dateLocal(v){
          return localDate(v);
      }
  },

  computed: {},

  methods: {
      changeLike(type, commonId){
          // 0 表示切换点赞  1 表示 切换 踩
          if((this.common.isLike && type== this.common.LIKE) || (this.common.isDislike && type== this.common.DISLIKE)){
              return ;
          }
          this.$emit('like',type,commonId)
      }
  }
}

</script>
<style scoped>
    .c-item {
        margin: 20px 20px 0px;
        border-bottom: 1px solid #EAEAEB;
    }
    .c-item > div:first-child {
        justify-content:space-between;
    }
    .uname {
        color: #6B6A6F;
        font-size: 16px;
    }

    .date{ 
        color: #A4A4A6;
        font-size: 16px;
    }

    .c-item > div:nth-child(2) {
        margin: 10px 0;
    }
    
    
    .c-item > div:nth-child(3) {
        color: "#2A2931";
        font-size: 20px;    
    }
    

    .c-item > div:nth-child(4) {
        color: #848389;
        font-size: 18px;   
        margin: 16px 0;
        overflow: hidden;
    }

    .c-item > div:nth-child(5){
        display: flex;
        justify-content:space-between;
    }
    .c-item > div:nth-child(5) > img {
        width: 105px;
        height: 105px;
    }

    .c-item > div:nth-child(6) {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 40px;
        color: #66656B;
        font-size: 18px;
        margin: 5px 0; 
    }

    .c-item > div:nth-child(6) > div{
        margin-left: 20px;
    }

    .c-item > div:nth-child(6)  i {
        font-size: 24px;
        margin-right:10px; 
    }
</style>